<template>
	<view class="lys-date">
		<view class="lys-date-con">
			<view class="lys-date-con-title">
				<view class="" @tap="cancleTime">取 消</view>
				<view class="">
					<view class="">选择时间</view>
					<view class="">{{ showSelectDayStr }}</view>
				</view>
				<view class="" @tap="submitTime">确 定</view>
			</view>
			<view class="lys-date-con-sel">
				<view :class="selType == 1 ? 'sel' : ''" @tap="changeType(1)">日</view>
				<view :class="selType == 2 ? 'sel' : ''" @tap="changeType(2)">周</view>
				<view :class="selType == 3 ? 'sel' : ''" @tap="changeType(3)">月</view>
				<view :class="selType == 4 ? 'sel' : ''" @tap="changeType(4)">年</view>
			</view>
			<view class="lys-date-con-picker">
				<picker-view :value="selectValue" @change="bindChange" class="picker-view"
					indicator-style="height: 50px;">
					<picker-view-column v-for="(item, index) in columns" :key="index">
						<view class="item" v-for="(childItem, childIndex) in item" :key="childIndex">{{ childItem }}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dateFormat
	} from './format.js';
	export default {
		props: {
			type: {
				type: Number | String,
				default: 1
			},
			time: {
				type: String,
				default: ''
			},
			startTime: {
				type: String,
				default: ''
			},
			endTime: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				selType: 1,
				selectYear: '',
				selectYearIndex: '',
				selectMonth: '',
				selectMonthIndex: '',
				selectWeek: '',
				selectWeekIndex: '',
				selectDay: '',
				selectDayIndex: '',
				timeStr: '',
				selectValue: [],
				columns: [],
				showSelectDayStr: ''
			};
		},
		mounted() {
			// 处理类型
			this.selType = this.type;
			// 所有的都转化为，以天为维度，这样统一度量尺
			// 自定义的以开始时间为准，转化为日，周，月

			// 处理时间问题
			if (this.type == 1) {
				// 类型为，日
				if (this.time == '') {
					this.timeStr = new Date().getTime();
				} else {
					this.timeStr = new Date(this.time.replace(/-/g, '/')).getTime();
				}
			}
			if (this.type == 2) {
				// 类型为，周
				// 2022年 第3周，根据传过来的字符串，找出本周的开始时间
				if (this.time == '') {
					this.timeStr = new Date().getTime();
				} else {
					// 分割字符串，获取到数字
					let year = this.time.substr(0, 4); // 年
					let week = this.time.substr(6).replace('周', ''); // 周
					let day = this.changeWeekToFirstDay(year, week);
					this.timeStr = new Date(day.replace(/\-/g, '/')).getTime();
				}
			}
			// 类型为，月
			if (this.type == 3) {
				// 2022年 3月，根据传过来的字符串，找出本周的开始时间
				if (this.time == '') {
					this.timeStr = new Date().getTime();
				} else {
					// 分割字符串，获取到数字
					let year = this.time.substr(0, 4); // 年
					let month = this.time.substr(6).replace('月', ''); // 周
					let day = year + '-' + month + '-01';
					this.timeStr = new Date(day.replace(/\-/g, '/')).getTime();
				}
			}

			// 类型为，年
			if (this.type == 4) {
				if (this.time == '') {
					this.timeStr = new Date().getTime();
				} else {
					// 分割字符串，获取到数字
					let year = this.time.substr(0, 4); // 年
					let day = year + '-01-01';
					this.timeStr = new Date(day.replace(/\-/g, '/')).getTime();
				}
			}

			this.changeType(this.type);
		},
		watch: {
			selectYearIndex() {
				if (this.selType == 1) this.daysFun();
				if (this.selType == 2) this.weeksFun();
				if (this.selType == 3) this.monthsFun();
				this.columnsFun();
				this.selectValueFun();
				this.showSelectDay();
			},
			selectMonthIndex() {
				if (this.selType == 1) this.daysFun();
				this.columnsFun();
				this.selectValueFun();
				this.showSelectDay();
			},
			selectDayIndex() {
				this.selectValueFun();
				this.showSelectDay();
			},
			selectWeekIndex() {
				this.selectValueFun();
				this.showSelectDay();
			}
		},
		methods: {
			changeType(flg) {
				this.selType = flg;
				if (flg == 1) {
					this.yearsFun();
					this.monthsFun();
					this.daysFun();
				}
				if (flg == 2) {
					this.yearsFun();
					this.weeksFun();
				}
				if (flg == 3) {
					this.yearsFun();
					this.monthsFun();
				}
				if (flg == 4) {
					this.yearsFun();
				}
				this.columnsFun();
				this.selectValueFun();
				this.showSelectDay();
			},
			columnsFun() {
				let data = [];
				// 日
				if (this.selType == 1) {
					data.push(this.years);
					data.push(this.months);
					data.push(this.days);
				}
				// 周
				if (this.selType == 2) {
					data.push(this.years);
					data.push(this.weeks);
				}
				// 月
				if (this.selType == 3) {
					data.push(this.years);
					data.push(this.months);
				}
				// 年
				if (this.selType == 4) {
					data.push(this.years);
				}
				this.columns = data;
			},
			selectValueFun() {
				this.selectValue = [];
				this.$nextTick(() => {
					if (this.selType == 1) this.selectValue = [this.selectYearIndex, this.selectMonthIndex, this
						.selectDayIndex
					];
					if (this.selType == 2) this.selectValue = [this.selectYearIndex, this.selectWeekIndex];
					if (this.selType == 3) this.selectValue = [this.selectYearIndex, this.selectMonthIndex];
					if (this.selType == 4) this.selectValue = [this.selectYearIndex];
				});
			},
			showSelectDay() {
				// 日
				if (this.selType == 1) {
					let day = `${this.selectYear}-${this.selectMonth}-${this.selectDay}`;
					let week = new Date(day.replace(/\-/g, '/')).getDay();
					let weekArray = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
					this.showSelectDayStr = `${day} ${weekArray[week]}`;
					this.timeStr = new Date(day.replace(/\-/g, '/')).getTime();
				}
				// 周
				if (this.selType == 2) {
					let startDay = dateFormat('m-d', this.changeWeekToFirstDay(this.selectYear, this.selectWeekIndex + 1));
					let endDay = dateFormat('m-d', this.changeWeekToEndDay(this.selectYear, this.selectWeekIndex + 1));
					this.showSelectDayStr = `${this.selectYear}年 ${this.selectWeek} (${startDay} 至 ${endDay})`;
					this.timeStr = new Date(this.changeWeekToFirstDay(this.selectYear, this.selectWeek.replace('第', '')
						.replace('周', '')).replace(/\-/g, '/')).getTime();
				}
				// 月
				if (this.selType == 3) {
					this.showSelectDayStr = `${this.selectYear}年 ${this.selectMonth}月`;
					this.timeStr = new Date(`${this.selectYear}/${this.selectMonth}/01`).getTime();
				}
				// 年
				if (this.selType == 4) {
					this.showSelectDayStr = `${this.selectYear}年`;
					this.timeStr = new Date(`${this.selectYear}/${this.selectMonth}/01`).getTime();
				}
				console.log('当前所选时间==>' + this.timeStr + '==>' + dateFormat('Y-m-d', this.timeStr));
			},
			yearsFun() {
				// 年初始化
				let year = new Date(this.timeStr).getFullYear();
				let endYear = new Date().getFullYear() + 5;
				let years = [];
				let j = 0;
				for (var i = 2000; i <= endYear; i++) {
					years.push(i);
					if (year == i) {
						this.selectYearIndex = j;
						this.selectYear = i;
					}
					j++;
				}
				this.years = years;
				console.log('yearsFun===>', this.selectYearIndex, this.selectYear);
			},
			monthsFun() {
				// 月初始化
				let month = new Date(this.timeStr).getMonth() + 1;
				let months = [];
				for (var i = 1; i <= 12; i++) {
					months.push(('' + i).padStart(2, '0'));
					if (month == i) {
						this.selectMonthIndex = i - 1;
						this.selectMonth = ('' + i).padStart(2, '0');
					}
				}
				this.months = months;
			},
			weeksFun() {
				let weeks = [];
				let year = this.years[this.selectYearIndex];
				// 判断今年有多少天
				let yearStart = new Date(`${year}/01/01 00:00:00`).getTime();
				let yearEnd = new Date(`${year}/12/31 23:59:59`).getTime();
				let allDday = (yearEnd - yearStart + 1000) / (1 * 24 * 60 * 60 * 1000);
				// 计算有多少周
				let week = Math.ceil(allDday / 7);
				// 计算当前属于第几周，+1s,
				let selWeek = Math.ceil((this.timeStr + 1000 - yearStart) / (1 * 24 * 60 * 60 * 1000) / 7);
				for (var i = 1; i <= week; i++) {
					weeks.push('第' + i + '周');
					if (selWeek == i) {
						this.selectWeekIndex = i - 1;
						this.selectWeek = '第' + i + '周';
					}
				}
				this.weeks = weeks;
			},
			daysFun() {
				// 日初始化
				let day = new Date(this.timeStr).getDate();
				let days = [];
				let monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
				if (this.selectMonth == '02' && this.selectYear % 4 == 0) {
					// 闰年二月份需要特殊处理
					monthDays[1] = 29;
				}
				let maxDay = monthDays[this.selectMonthIndex];
				for (let i = 1; i <= maxDay; i++) {
					days.push(('' + i).padStart(2, '0'));
					if (day == i) {
						this.selectDayIndex = i - 1;
						this.selectDay = ('' + i).padStart(2, '0');
					}
				}
				this.days = days;
			},
			changeWeekToFirstDay(year, selWeek) {
				let yearStart = new Date(`${year}/01/01 00:00:00`).getTime();
				yearStart += (selWeek - 1) * 7 * 1 * 24 * 60 * 60 * 1000;
				return dateFormat('Y-m-d', yearStart);
			},
			changeWeekToEndDay(year, selWeek) {
				let yearStart = new Date(`${year}/01/01 00:00:00`).getTime();
				yearStart += selWeek * 7 * 1 * 24 * 60 * 60 * 1000 - 1000;
				return dateFormat('Y-m-d', yearStart);
			},
			dayToWeek(day) {},
			bindChange(e) {
				let value = e.detail.value;
				if (this.selType == 1) {
					this.selectYearIndex = value[0];
					this.selectYear = this.years[value[0]];
					this.selectMonthIndex = value[1];
					this.selectMonth = this.months[value[1]];
					this.selectDayIndex = value[2];
					this.selectDay = this.days[value[2]];
				}
				if (this.selType == 2) {
					this.selectYearIndex = value[0];
					this.selectYear = this.years[value[0]];
					this.selectWeekIndex = value[1];
					this.selectWeek = this.weeks[value[1]];
				}
				if (this.selType == 3) {
					this.selectYearIndex = value[0];
					this.selectYear = this.years[value[0]];
					this.selectMonthIndex = value[1];
					this.selectMonth = this.months[value[1]];
				}
				if (this.selType == 4) {
					this.selectYearIndex = value[0];
					this.selectYear = this.years[value[0]];
				}
			},
			cancleTime() {
				this.$emit('cancleTime');
			},
			submitTime() {
				let time = '';
				if (this.selType == 1) time = `${this.selectYear}-${this.selectMonth}-${this.selectDay}`;
				if (this.selType == 2) time = `${this.selectYear}-${this.selectWeek}`.replace('第', '');
				if (this.selType == 3) time = `${this.selectYear}-${this.selectMonth}`;
				if (this.selType == 4) time = `${this.selectYear}`;
				this.$emit('submitTime', time, this.selType, this.timeStr);
			}
		}
	};
</script>

<style lang="scss" scoped src="./index.scss"></style>